// 改文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//也是一个构造函数，可以new出来
//创建并一个路由器，先不暴露，给路由器加路由守卫
const router = new VueRouter({
    //在routes中配置一个个的路由
    routes:[
        {
            name:'guanyu',
            path:'/about11',
            component:About,
            meta:{isAuth:false,title:'关于'}  // meta：路由元信息，用于存放自定义信息
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            // 二级路由，会根据一级路由自动拼接 /
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'},
                    // 独享路由守卫，只有前置，没有后置
                    // 进入该组件路由之前调用
                    beforeEnter: (to, from, next) => {
                        if(to.meta.isAuth){ // 为true才校验权限，home组件没加为undefined也为false
                            //简单判断localStorage中的name是不是tom，是就放行，需要手动添加到localStorage
                            if(localStorage.getItem('name') === 'tom'){
                                next()
                            }else{
                                alert('名字不对，无权限查看！')
                            }
                        }else{
                            next()
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            // 给路由路径加占位符
                            path:'detail/:id/:titleName',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},
                            //谁接收参数给谁配置
                            // props的第一种写法：值为对象。对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}
                            // props的第二种写法：值为布尔值。若为真-就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true
                            // props的第三种写法：值为回调函数。只需要定义，vue-route会调用并传入$route
                            props($route){
                                return {
                                    id:$route.params.id,
                                    titleName:$route.params.titleName
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})


// //路由器初始化时被调用，在每次路由切换之前被调用
// //to——去哪 from——从哪来 next——放行
// router.beforeEach((to,from,next) => {
//     // to包含去哪里的组件信息，from包含从哪里来的组件信息
//     console.log(to,from)
//     //1.根据要去的路由组件路径判断如果是 /home/news,/home/message，就判断name，反之直接放行
//     // if(to.path === '/home/news' || to.path === '/home/message'){
//     //2.根据路由名字判断
//     // if(to.name === 'xinwen' || to.name === 'xiaoxi'){
//     //3.给每个路由添加属性，判断属性值来决定要不要检验权限
//     if(to.meta.isAuth){ // 为true才校验权限，home组件没加为undefined也为false
//         //简单判断localStorage中的name是不是tom，是就放行，需要手动添加到localStorage
//         if(localStorage.getItem('name') === 'tom'){
//             next()
//         }else{
//             alert('无权限查看！')
//         }
//     }else{
//         next()
//     }
// })

// //全局后置路由守卫，可以是普通函数，也可是箭头函数
// //路由器初始化时被调用，在每次路由切换之后被调用
// //to——去哪 from——从哪来 相比前置路由守卫没有了next参数，因为不需要放行了，到全局后置路由守卫这里说明已经走完了
router.afterEach((to,from)=>{
    document.title = to.meta.title || 'Vue系统'
})

export default router